{% extends './layout.html.twig' %}

{% block title %}Pairs | Crypto Bot{% endblock %}

{% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Pairs</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ '/' }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Pairs</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.Content Header (Page header) -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">

                                <div class="row">
                                    <div class="col-md-6">
                                        <input value="" placeholder="Search exchange, state, strategy" class="filter-pairs">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-sm-right">
                                            <strong>Trading:</strong> {{ stats.trading }} <span class="text-muted"> - </span>
                                            <strong>Positions:</strong> {{ stats.positions }} <span class="text-muted"> - </span>
                                            <strong>Total Pairs:</strong> {{ pairs.length }}
                                        </div>
                                    </div>
                                </div>

                            </div>
                              <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover table-pairs">
                                        <thead>
                                        <tr>
                                            <th scope="col" title="Exchange">E</th>
                                            <th scope="col">Symbol</th>
                                            <th scope="col">State</th>
                                            <th scope="col">Capital</th>
                                            <th scope="col">Strategies Watch</th>
                                            <th scope="col">Strategies Trade</th>
                                            <th scope="col">Options</th>
                                            <th scope="col">Process</th>
                                            <th scope="col">Action</th>
                                        </tr>

                                        </thead>
                                        <tbody>
                                        {% for pair in pairs %}
                                            <tr data-search="{{ pair.exchange }}.{{ pair.symbol }} {{ pair.is_trading ? 'trade' : 'watch' }} {{ pair.strategy_names|join(' ') }}">
                                                <td class="no-wrap"><img src="/img/exchanges/{{ pair.exchange }}.png" title="{{ pair.exchange }}" alt="{{ pair.exchange }}" width="16px" height="16px"></td>
                                                <td class="no-wrap row-pair"><a target="blank" href="/tradingview/{{ pair.exchange|url_encode }}:{{ pair.symbol|url_encode }}">{{ pair.symbol }}</td>
                                                <td class="no-wrap">{{ pair.is_trading ? '<i class="fas fa-cart-plus font-weight-bold" title="Trade"></i>' : '<i class="fas fa-eye text-muted" title="Watch"></i>' }}</td>
                                                <td class="no-wrap">{% if pair.is_trading %}{{ pair.trade_capital|default(0) }} / {{ pair.trade_currency_capital|default(0) }} / {{ pair.trade_balance_percent|default(0) }}% {% endif %}</td>
                                                <td class="text-muted"><span class="span-md">{% if pair.strategies.length > 0 %}{{ pair.strategies|json_encode }}{% endif %}</span></td>
                                                <td class="text-muted"><span class="span-md">{% if pair.strategies_trade.length > 0 %}{{ pair.strategies_trade|json_encode }}{% endif %}</span></td>
                                                <td class="text-muted">
                            <span class="span-md">
                                {% if pair.watchdogs %}
                                    {{ pair.watchdogs|json_encode }}
                                {% endif %}
                            </span>
                                                </td>
                                                <td style="white-space: nowrap">{{ pair.process }}</td>
                                                <td class="text-right"  style="white-space: nowrap">
                                                    {% if pair.trade_capital > 0 or pair.trade_currency_capital > 0 or pair.trade_balance_percent > 0 %}
                                                        <form action="/pairs/{{ pair.exchange }}-{{ pair.symbol }}" method="post" style="margin:0; padding:0">
                                                            <div class="btn-group btn-group-sm">
                                                                {% if pair.has_position|default(false) == false and not pair.process %}
                                                                    <button name="action" value="long" data-toggle="tooltip" title="Limit Long" class="btn btn-success btn-sm"><i class="fas fa-cart-plus"></i> Long</button>
                                                                    <button name="action" value="short" data-toggle="tooltip" title="Limit Short" class="btn btn-danger btn-sm"><i class="fas fa-shopping-cart"></i> Short</button>


                                                                    <button name="action" value="long_market" data-toggle="tooltip" title="Market Long" class="btn btn-success btn-sm"><i class="fas fa-cart-plus"></i></button>
                                                                    <button name="action" value="short_market" data-toggle="tooltip" title="Market Short" class="btn btn-danger btn-sm"><i class="fas fa-shopping-cart"></i></button>
                                                                {% endif %}

                                                                {% if pair.has_position|default(false) and not pair.process %}
                                                                    <button name="action" value="close" data-toggle="tooltip" title="Limit Close" class="btn btn-dark btn-sm"><i class="fas fa-window-close"></i> Close</button>
                                                                    <button name="action" value="close_market" data-toggle="tooltip" title="Market Close" class="btn btn-dark btn-sm"><i class="fas fa-window-close"></i></button>
                                                                {% endif %}

                                                                {% if pair.process|default %}
                                                                    <button name="action" value="cancel" data-toggle="tooltip" title="close" class="btn btn-primary btn-sm"><i class="fas fa-trash"></i> Cancel</button>
                                                                {% endif %}
                                                            </div>
                                                        </form>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
{% endblock %}

{% block javascript %}
<script src="/js/pairs.js?v={{ asset_version() }}"></script>
{% endblock %}
